<!DOCTYPE html>
<html>
<head>
    <title>Device Orientation Event Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <p>This example only works in Chrome in devices such as Macbooks, Thinkpads, or Android, or on Safari for iOS 4.2+.</p>
    <div id="output"></div>
    <div id="arrow" style="background:#000;width:3px;height:300px;margin:0 auto;"></div>
    <script>
    EventUtil.addHandler(window, "deviceorientation", function(event){
        var output = document.getElementById("output");
        var arrow = document.getElementById("arrow");
        arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
        output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta + ", Gamma=" + event.gamma + "<br>";
    });

    </script>
</body>
</html>
